<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		
		<view class="whole-box">
		<!-- <view class="whole-box" style="background-color: #FB7483;"> -->
			<view class="gold-black-box">
				
				<view class="top-box">
					<view class="top-box-content">
						<image class="avatar" :src="member && member.head_portrait ? member. head_portrait : '../../../static/default-avatar.png'" mode="aspectFill"></image>
						<text class="username">{{member && member.nickname ? member.nickname : '' }}</text>
						<view class="data-box">
							<view>个人订单:<text>{{total?total:'0'}}</text></view>
							<view>个人总消费:<text>{{total_pay?total_pay:'0.00'}}</text></view>
						</view>
						<view class="data-box2">
							<view>团队订单:<text>{{team_order?team_order:'0'}}</text></view>
							<view>团队总消费:<text>{{team_pay_money?team_pay_money:'0.00'}}</text></view>
						</view>
						<view class="scroll-list">
							<scroll-view scroll-x class=" nav text-center">
								<view class="cu-item" v-for="(item,index) in listObj" :key="index" :class="index==TabCur?'cu-active ':''"
								 @tap="tabSelect" :data-id="index">
									{{item.title}}
								</view>
							</scroll-view>
						</view>
					</view>
					
					<view class="level-detail" v-if="member && member.level">
						<!-- <image src="@/static/icon-level.png"></image> -->
						<image src="@/static/level-blo.png"></image>
						<text>{{member.level.name}}</text>
						
						
					</view>
					
				</view>
				
				
				
				<view class="my-data-box" :style="'height:'+scroll_box_height+'px'" v-if="listObj[TabCur].list.length > 0">
					<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<view class="my-data-box-content" >
						
						<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
						<!-- <view style="overflow: hidden auto;" :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore"> -->
							<view v-for="(item,index) in listObj" :key="index" v-if="index==TabCur">
								<block v-for="(order ,i) in item.list" :key="i">
									<orderView :item="order" v-on:reloadList="reloadList"></orderView>
								</block>
								<view class="cu-load margin-center text-white" :class="item.loading?'loading':'over'" ></view>
							</view>
						<!-- </view> -->
						</scroll-view>
						
						<!-- <view class="order-box" v-for="(item,index) in listObj" :key="index" v-if="index==TabCur">
							<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
								<view class="order-item" v-for="(order ,i) in item.list" :key="i">
									<view class="product-box">
										<image class="pro-thumb" src="@/static/empty_l.png"></image>
										<view class="info">
											<text class="title"></text>
											<text class="spec"></text>
										</view>
										<view class="num-price">
											<text class="num"></text>
											<text class="price"></text>
										</view>
									</view>
									<view class="total-info">总价￥198.00，优惠4.14，实付款￥193.86</view>
									<view class="action-list">
										<text :class="'bg-'+theme">查看物流</text>
									</view>
									
								</view>
							</scroll-view>
						</view> -->
					</view>
				</view>	
				
			</view>
		</view>		
		
		
		<!-- <scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" v-for="(item,index) in listObj" :key="index" :class="index==TabCur?'cur text-'+theme:'text-gray'"
			 @tap="tabSelect" :data-id="index">
				{{item.title}}
			</view>
		</scroll-view> -->

		<!-- <view v-for="(item,index) in listObj" :key="index" v-if="index==TabCur">
			<block v-for="(order ,i) in item.list" :key="i">
				<orderView :item="order" v-on:reloadList="reloadList"></orderView>
			</block>
			<view class="cu-load margin-center" :class="item.loading?'loading':'over'"></view>
		</view> -->
		<!-- <Foot></Foot> -->
		<Navbar ref="navbar" PageCur="order"></Navbar>
	</view>
</template>

<script>
	import orderView from '@/components/shop/orderViewNew.vue'
	import Navbar from '@/components/default/Navbar.vue'
	// import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		// name: "order",
		components: {
			orderView,
			// Foot,
			Navbar
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		mounted() {
			// this.getScrollH()
		},
		data() {
			return {
				theme: this.$config.THEME(),
				TabCur: 0,
				is_channel: 0,
				title: '订单中心',
				member: [],
				total: 0,
				total_pay: 0.00,
				team_order:0,
				team_pay_money:0.00,
				scroll_box_height: 900,
				scrollHeight: 900,
				
				listObj: [
					// {
					// 	title: '全部',
					// 	list: [],
					// 	hasMore: true,
					// 	loading: false,
					// 	page: 1,
					// 	type: 0,
					// },
					{
						title: '待付款',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 0
					}, {
						title: '待发货',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 1
					},
					{
						title: '待收货',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 2
					},
					{
						title: '待评价',
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						type: 3
					},
					// {
					// 	title: '退款',
					// 	list: [],
					// 	hasMore: true,
					// 	loading: false,
					// 	page: 1,
					// 	type: 4
					// },
				],
			};
		},
		onLoad(options) {
			if (options.status)
				this.TabCur = parseInt(options.status)

			if (options.is_channel) {
				this.is_channel = options.is_channel
				this.title = '进货订单'
			}
			
			

			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member)=>{
					this.member = member
					
				})
				this.$nextTick(function() {
					this.getShowdata();
					uni.startPullDownRefresh({})
					// this.getScrollH()
					
				})
			}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				if (this.$common.getCache('order_reload')) {
					this.$common.rmCache('order_reload')
					this.$nextTick(function() {
						uni.startPullDownRefresh({})
					})
				}
			}
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.screenHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.top-box').boundingClientRect()
				query.select('.scroll-list').boundingClientRect()
				// query.select('.foot').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					console.log(winHeight)
					console.log(res[0].bottom)
					_this.scroll_box_height = winHeight - res[0].bottom - 12 - 24
					console.log(_this.scroll_box_height)
					_this.scrollHeight = winHeight - res[1].bottom - 24
					
				})
			},
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.listObj[this.TabCur].list = []
					this.listObj[this.TabCur].hasMore = true
					this.listObj[this.TabCur].page = 1
					this.listObj[this.TabCur].loading = false
					this.getList(this.TabCur)
				}
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return

				this.listObj[index].loading = true
				let params = {
					page: obj.page,
					is_channel: this.is_channel,
				}
				if (obj.type > 0) {
					params.synthesize_status = obj.type 
				}
				this.$http
					.get('order_index', params)
					.then((response) => {
						console.log(response)
						let list = obj.list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
							
						} else {
							this.listObj[index].hasMore = false
							
						}
						this.listObj[index].list = list
						this.listObj[index].loading = false
						this.listObj[index].page++
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getShowdata(){
			
				this.$http
					.get('order_total', {})
					.then((response) => {
						console.log(response)
						this.total = response.data.data.total
						this.total_pay = response.data.data.total_pay
						this.team_order = response.data.data.team_order
						this.team_pay_money = response.data.data.team_pay_money
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			reloadList() {
				uni.startPullDownRefresh({})
			},
			getMore() {
				this.getList(this.TabCur)
			},
		},
		onPullDownRefresh() {
			console.log(this.TabCur)
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].hasMore = true
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.getList(this.TabCur)
			// uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.getList(this.TabCur)
		},
	}
</script>

<style>
	.cu-active{
		/* background: -webkit-linear-gradient(left, #FFEA5E, #FFEA5E, #FCC710, #FCC710); */
		/* background-color: #815ad7; */
		background-color: rgb(254,39,114);
		color: #ffffff;
		border-radius: 20px;
	}
	.nav .cu-item{
		height: 25px!important;
		line-height: 25px!important;
		text-align: center;
		/* float: left; */
		/* width: 12%; */
	}
	.whole-box{
		/* background-color: #333333; */
		min-height: calc(100vh - 45px);
		padding: 12px 0;
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
	}
	.gold-black-box{
		padding: 12px 0;
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 540rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 15rpx;
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-box-content .avatar{
		margin-top: 26rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
	}
	.top-box-content .username{
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-box-content .bg-logo{
		width: 196rpx;
		height: 54rpx;
		padding-left: 20rpx;
	}
	.top-box-content .page-title{
		padding-left: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}
	
	.top-box-content .data-box{
		padding: 0 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin-top: 12px;
	}
	.data-box view{
		width: 50%;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.data-box view text{
		margin-left: 10rpx;
	}
	.top-box-content .data-box2{
		padding: 0 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin: 12px 0px;
	}
	.data-box2 view{
		width: 50%;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.data-box2 view text{
		margin-left: 10rpx;
	}
	
	.top-box .level-detail{
		position: absolute;
		top: 52rpx;
		left: 400rpx;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #000000; */
		/* background: -webkit-linear-gradient(left, #C48415, #C48415, #EDCB3E, #CA8B0F); */
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#C48415), to(#CA8B0F)); */
	}
	.level-detail image{
		width: 145rpx;
		height: 43rpx;
		margin-right: 6rpx;
		flex-shrink: 0;
		left: -13px;
		/* top: 16px; */
	}
	.level-detail text{
		font-size: 22rpx;
		font-weight: bold;
		color: #ffffff;
		position: absolute;
		margin-top: 10rpx;
		margin-left: -15rpx;
	}
	
	
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 764rpx;
		height: 336rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 100%;
		/* height: 336rpx; */
		position: absolute;
		left: 0;
		top: 0;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		padding: 0 40rpx;
	}
	
	.my-data-box-content .scroll-list{
		
	}
	.scroll-list .my-status{
		color: #E5D4B9
	}
	
	.my-data-box-content .order-box{
		
	}
	.order-box{
		
	}
</style>
